<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
        #ctt .test {
            width: 100px; height: 100px;  color: white; line-height: 100px; text-align: center; display: inline-block; margin-top: 30px; position: absolute; left: 0; top: 0;
        }
    </style>
</head>
<body>
<div style="text-align: center;position:relative;left:100px;top:100px;"  id="ctt">

    <div id="test1" class="test" style="background-color: green; ">
        transformjs
    </div>

    <div id="test2" class="test" style="background-color: red;left:200px; ">
        transformjs
    </div>

    <div id="test3" class="test" style="background-color: blue;left:400px ">
        transformjs
    </div>

    <div id="test4" class="test" style="background-color: #ff6a00;left:600px ">
        transformjs
    </div>

    <div id="test5" class="test" style="background-color:#485f0f;left:400px;top:200px; ">
        transformjs
    </div>

    <div id="test6" class="test" style="background-color:#485f0f;left:0;top:200px; ">
        transformjs
    </div>

    <div id="test7" class="test" style="background-color:#291996;left:200px;top:200px; ">
        transformjs
    </div>

    <div id="test8" class="test" style="background-color:#291996;left:600px;top:200px; ">
        transformjs
    </div>

    <div id="test9" class="test" style="background-color:#c71585;left:200px;top:400px; ">
        transformjs
    </div>
    <div id="test10" class="test" style="background-color:#32cd32;left:400px;top:400px; ">
        transformjs
    </div>
</div>
<script src="transform.js"></script>
<script>
    //----------------how to use---------------------------------
    var element1 = document.querySelector("#test1");
    var element2 = document.querySelector("#test2");
    var element3 = document.querySelector("#test3");
    var element4 = document.querySelector("#test4");
    var element5 = document.querySelector("#test5");
    var element6= document.querySelector("#test6");
    var element7 = document.querySelector("#test7");
    var element8 = document.querySelector("#test8");
    var element9 = document.querySelector("#test9");
    var element10 = document.querySelector("#test10");
    Transform(element1);
    Transform(element2);
    Transform(element3);
    Transform(element4);
    Transform(element5);
    Transform(element6);
    Transform(element7);
    Transform(element8);
    Transform(element9);
    Transform(element10);

    element8.originZ = -150;
    element4.originX = -50;
    element4.originY = -50;

    var step = 0.02, xStep = 3;
    setInterval(function () {
        element1.rotateZ++;
        element2.rotateY++;
        element3.rotateX++;
        element4.rotateZ++;
        element5.rotateY++;
        element5.rotateX++;

        element7.translateX < -50 && (xStep *= -1);
        element7.translateX > 50 && (xStep *= -1);
        element7.translateX += xStep;
        element6.scaleX < 0.5 && (step *= -1);
        element6.scaleX > 1.5 && (step *= -1);
        element6.scaleX += step;
        element6.scaleY += step;
        element8.rotateY++;
        element8.rotateX++;

        element9.skewX++;
        element10.skewY++;
    }, 15);
    //------------------------------------------------------------
</script>
</body>
</html>